<template>
    <div class="wh-100" style="background-color: white">
        <div class="w-100  pr-8 pl-8 bor-base-b d-flex-between-center ch50">
            <div class="fs-14 fw-6">档案信息查看</div>
            <Button  @click="$router.go(-1)" style="background-color: white">返回</Button>
        </div>
        <div class="w-100 h-95 d-flex pt-12 fs-14">
            <div v-loading="personInfoLoading" class="w-30 h-100 bor-base-r pl-28 pt-16">
                <div class="fw-6">基本信息</div>
                <div class="w-100 mt-16">
                    <div class="mt-8 d-flex-align-center">
                        <div>考生号：</div>
                        <div>{{ PersonInfo.ksh ? PersonInfo.ksh : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>姓名：</div>
                        <div>{{ PersonInfo.name ? PersonInfo.name : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>身份证号：</div>
                        <div>{{ PersonInfo.idCard ? PersonInfo.idCard : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>学历：</div>
                        <div>{{ PersonInfo.xlCode ?  xlList.filter((item) => item.value == PersonInfo.xlCode)[0].title  : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>性别：</div>
                        <div>{{ PersonInfo.sexCode ? sexList.filter((item) => item.value == PersonInfo.sexCode)[0].title  : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>民族：</div>
                        <div>{{ PersonInfo.mzCode ? mzList.filter((item) => item.value == PersonInfo.mzCode)[0].title   : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>政治面貌：</div>
                        <div>{{ PersonInfo.zzmmCode ?  zzmmList.filter((item) => item.value == PersonInfo.zzmmCode)[0].title  : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>手机号：</div>
                        <div>{{ PersonInfo.mobile ? PersonInfo.mobile : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>电子邮箱：</div>
                        <div>{{ PersonInfo.email ? PersonInfo.email : '暂无' }}</div>
                    </div>
                </div>
                <div  class="w-100 mt-52">
                    <div class="mt-8">
                        <div class="mt-8 d-flex-align-center">
                            <div>毕业院校：</div>
                            <div>{{ PersonInfo.gxmc ? PersonInfo.gxmc : '暂无' }}</div>
                        </div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>学号：</div>
                        <div>{{ PersonInfo.xh ? PersonInfo.xh : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>院系：</div>
                        <div>{{ PersonInfo.yxmc ? PersonInfo.yxmc : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>专业：</div>
                        <div>{{ PersonInfo.zy ? PersonInfo.zy : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>学制：</div>
                        <div>{{ PersonInfo.xz ? PersonInfo.xz : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>培养方式：</div>
                        <div>{{ PersonInfo.pyfsCode ?  pyfsList.filter((item) => item.value ==  PersonInfo.pyfsCode)[0].title : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>入学时间：</div>
                        <div>{{ PersonInfo.rxsj ? PersonInfo.rxsj : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>毕业时间：</div>
                        <div>{{ PersonInfo.bysj ? PersonInfo.bysj : '暂无' }}</div>
                    </div>
                    <div class="mt-8 d-flex-align-center">
                        <div>生源所在地：</div>
                        <div>{{ PersonInfo.sydCode ? sydAddress  : '暂无' }}</div>
                    </div>
                </div>

            </div>
            <div class="w-70 h-100 ">
                <div v-loading="archiveTransferInfoLoading" class="w-100 h-65  pl-28 pt-16 bor-base-b">
                    <div class="fw-6">档案信息</div>
                    <div class="w-100 mt-16">
                        <div class="mt-8 d-flex-align-center">
                            <div>档案转递类型：</div>
                            <div>{{ ArchiveTransferInfo.transferType ? accountTypeList.filter((item) => item.value == ArchiveTransferInfo.transferType)[0].title  : '暂无' }}</div>
                        </div>
                        <div class="mt-8 d-flex-align-center">
                            <div>档案转递单位名称：</div>
                            <div>{{ ArchiveTransferInfo.unitName ? ArchiveTransferInfo.unitName : '暂无' }}</div>
                        </div>
                        <div class="mt-8 d-flex-align-center">
                            <div>档案转递单位地址：</div>
                            <div>{{ ArchiveTransferInfo.unitAddress ? ArchiveTransferInfo.unitAddress : '暂无' }}</div>
                        </div>
                        <div class="mt-8  d-flex-align-center">
                            <div>档案转递单位邮编：</div>
                            <div>{{ ArchiveTransferInfo.unitZip ? ArchiveTransferInfo.unitZip : '暂无' }}</div>
                        </div>
                        <div class="mt-8 d-flex-align-center">
                            <div>档案转递联系人/联系部门：</div>
                            <div>{{ ArchiveTransferInfo.unitContact ? ArchiveTransferInfo.unitContact : '暂无' }}</div>
                        </div>
                        <div class="mt-8 d-flex-align-center">
                            <div>档案转递联系电话：</div>
                            <div>{{ ArchiveTransferInfo.unitTel ? ArchiveTransferInfo.unitTel : '暂无' }}</div>
                        </div>
                        <div class="mt-8 d-flex-align-center">
                            <div>情况说明：</div>
                            <div>{{ ArchiveTransferInfo.unitRemark ? ArchiveTransferInfo.unitRemark : '暂无' }}</div>
                        </div>
                        <div class="mt-8 d-flex">
                            <div class="">图像材料：</div>
                            <div class="" style="color:rgb(156, 156, 156)">点击图片可查看大图</div>
                        </div>
                        <div class="mt-8 pl-68">
                            <div v-if="srcList.length > 0">
                                <el-image
                                    v-for="(item, index) in srcList"
                                    class="mr-8 imageItem"
                                    :src="item"
                                    :preview-src-list="srcList">
                                </el-image>
                            </div>
                            <div v-else class="mt-8">暂无图片</div>
                        </div>
                    </div>
                </div>
                <div v-loading="jyqxLoading" class="w-100 h-35 pl-28 pt-16 ">
                    <div class="fw-6">毕业生去向信息</div>
                    <div class="w-100 mt-16">
                        <div class="mt-8 d-flex-align-center">
                            <div>毕业去向：</div>
                            <div>{{ Jyqx.type ? jyqxTitle : '待填报' }}</div>
                        </div>
                        <div v-if="(Jyqx.type && Jyqx.type == '1732711796952838145') || (Jyqx.onetype && Jyqx.onetype != '3')" class="mt-8 d-flex-align-center">
                            <div>单位名称：</div>
                            <div>{{ Jyqx.dwmc ? Jyqx.dwmc : '暂无' }}</div>
                        </div>
                        <div v-if="(Jyqx.type && Jyqx.type == '1732711796952838145') || (Jyqx.onetype && Jyqx.onetype != '3')" class="mt-8 d-flex-align-center">
                            <div>单位所在地：</div>
                            <div>{{ Jyqx.dwdz ? Jyqx.dwdz : '暂无' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getJyqxByIdCard } from '../../api/bys/jyqx/jyqx';
import { getBysPersonInfoByIdCard } from '../../api/bys/personInfo/bys';
import {
    getArchiveTransferInfoById,
    getAreaMap,
    getAreData
} from '../../api/archivesManagement/archiveForwardingAddressApis';
import { getDictDataByType } from '../../api';
import { employmentCategoryDataAPI, newProvincialDataApi } from '../../api/bys';

export default {
    data() {
        return {
            jyqxLoading:false,
            personInfoLoading:false,
            archiveTransferInfoLoading:false,
            srcList: [],
            Jyqx:{},
            PersonInfo:{},
            ArchiveTransferInfo:{},
            accountTypeList:[],
            xlList:[],
            sexList:[],
            mzList:[],
            zzmmList:[],
            pyfsList:[],
            sydAddress:'',
            jyqxList:[],
            locationOfTheUnitList:[],
            jyqxTitle:'',
        }
    },
    async mounted() {
        this.jyqxLoading = true;
        this.personInfoLoading = true;
        this.archiveTransferInfoLoading = true;
        await this.dictData()
        if (this.$route.params.row) {
            console.log(this.$route.params.row)
            let sfzh = this.$route.params.row.sfzh
            this.getJyqxByIdCard(sfzh)
            this.getBysPersonInfoByIdCard(sfzh)
            this.getArchiveTransferInfoById(this.$route.params.row.id)
        }
    },
    methods: {


        async dictData() {
            // 获取档案转递类型
            let res1 = await getDictDataByType('file-forwarding-type')
            if (res1.code === 200) {
                this.accountTypeList = res1.result
            }
            // 获取学历
            let res2 = await getDictDataByType('degree')
            if (res2.code === 200) {
                this.xlList = res2.result
            }
            // 获取性别
            let res3 = await getDictDataByType('sex')
            if (res3.code === 200) {
                this.sexList = res3.result
            }
            // 获取民族
            let res4 = await getDictDataByType('ethnic')
            if (res4.code === 200) {
                this.mzList = res4.result
            }
            // 获取政治面貌
            let res5 = await getDictDataByType('political')
            if (res5.code === 200) {
                this.zzmmList = res5.result
            }
            // 获取培养方式
            let res6 = await getDictDataByType('training-methods')
            if (res6.code === 200) {
                this.pyfsList = res6.result
            }
        },

        getJyqxByIdCard(idCard){
            this.jyqxLoading = true;
            getJyqxByIdCard({IdCard:idCard}).then(res => {
                this.Jyqx = res.result
                if(this.Jyqx.onetype){
                    employmentCategoryDataAPI({
                        dictMatch: this.Jyqx.onetype,
                        version: '2023'
                    }).then(res => {
                        this.jyqxLoading = false;
                        if (res.code === 200) {

                            for (const item of res.result) {
                                if (item.id === this.Jyqx.type) {
                                    this.jyqxTitle = item.title;
                                    break;
                                }
                                if(item.children){
                                    for (const child of item.children) {
                                        if (child.id === this.Jyqx.type) {
                                            this.jyqxTitle = child.title;
                                            break;
                                        }
                                    }
                                }
                            }
                        }
                    });
                }else{
                    this.jyqxLoading = false;
                }


            })
        },
        getBysPersonInfoByIdCard(idCard){
            this.personInfoLoading = true;
            getBysPersonInfoByIdCard({IdCard:idCard}).then(res => {
                this.PersonInfo = res.result
                if(this.PersonInfo.sydCode){
                    getAreData({code:this.PersonInfo.sydCode}).then((res) =>{
                        this.personInfoLoading = false;
                        console.log("getAreData",res)
                        if(res.code === 200){
                            this.sydAddress = res.result;
                        }
                    })
                }else{
                    this.personInfoLoading = false;
                }
            })
        },
        getArchiveTransferInfoById(id){
            this.archiveTransferInfoLoading = true;
            getArchiveTransferInfoById({id:id}).then(res => {
                this.ArchiveTransferInfo = res.result
                if(this.ArchiveTransferInfo.imageMaterial){
                    if(this.ArchiveTransferInfo.imageMaterial.indexOf(",") !== -1 ){
                        const backImages=this.ArchiveTransferInfo.imageMaterial.split(',') || '';
                        for (const image of backImages) {
                            this.srcList.push(image);
                        }
                    }else{
                        this.srcList.push(this.ArchiveTransferInfo.imageMaterial);
                    }
                }
                this.archiveTransferInfoLoading = false;
            })
        },
    }
}
</script>



<style scoped lang="less">
//form表单间距统一修改
.ivu-form-item {
    margin-bottom: 0.01rem !important;
}

.imageItem{
    width: 120px;
    height: 100px
}
.ch50 {
    height: 50px
}
</style>